<template>
  <div class="user-info">
    <Header title="个人信息" />
    <yd-cell-group>
      <yd-cell-item arrow v-py="12">
        <span slot="left">头像</span>
        <span slot="right">
          <Avatar sm :url="user.avatar"></Avatar>
        </span>
      </yd-cell-item>
      <yd-cell-item arrow>
        <span slot="left">昵称</span>
        <span slot="right">{{user.nickName}}</span>
      </yd-cell-item>
      <yd-cell-item arrow>
        <span slot="left">会员等级</span>
        <span slot="right">LV{{user.level}}</span>
      </yd-cell-item>
      <yd-cell-item arrow>
        <span slot="left">背景图片</span>
      </yd-cell-item>
      <yd-cell-item arrow>
        <span slot="left">性别</span>
        <span slot="right">{{user.gender}}</span>
      </yd-cell-item> 
    </yd-cell-group>
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  name: "UserInfo",
  computed: {
    ...mapState({
      user: state => state.userInfo
    })
  }
};
</script>

